const boxes = document.querySelectorAll('.box')

// 3. 注册滚动事件：
window.addEventListener('scroll', checkBoxes)

// 3.x 默认打开网页时 ->让当前视口的盒子先进行动画：
checkBoxes()

function checkBoxes() {
  // 3.2 先：设定一个滚动视口像素范围, 以便滚动到该距离后, 后面盒子的变化：
  const triggerBottom = window.innerHeight / 5 * 4

  boxes.forEach(box => {
    // 3.3 getBoundingClientRect：主要用于获取元素的大小及其相对于视口的位置...
    const boxTop = box.getBoundingClientRect().top

    // 3.4 如果当前 box 类名盒子与指定的 "滚动视口像素范围" 关系是：
    if(boxTop < triggerBottom) {
      // ① 如果当前 box 类名盒子是 ->"距离当前所能看到视口顶部"
      // 的距离, 已经小于了指定的 "滚动视口像素范围" ->则添加show类名：
      box.classList.add('show')
    } else {
      box.classList.remove('show')
    }
  })
}